<template>
  <div class="app">
    <hr>
    <div class="head">
    <h3>你点的菜是：{{ text }}</h3> 
<button @click="select()">取消订单</button>
    </div>
    <hr>
    <easy-html
      :key="item.title"
      v-for="item in list"
      :title="item.title"
      :price="item.price"
      :text="item.text"
      :describe="item.describe"
      @select="select"
    ></easy-html>
    <!-- @bargain="bargain" -->
  </div>
</template>

<script>
import EasyHtml from "./conponents/EasyHtml.vue";

export default {
  name: "App",

  components: {
    EasyHtml,
  },

  data() {
    return {
      text: "",
      list: [
        {
          title: "香喷喷的叫花鸡",
          price: "89",
          text: "肆佰年老字号",
          describe:'芬芳的泥土味'
        },
        {
          title: "软糯糯的糯花鸡",
          price: "10",
          text: "肆佰年老字号",
          describe:'荷叶保留了鸡的鲜味'
        },
        {
          title: "贼下饭的辣子鸡",
          price: "65",
          text: "肆佰年老字号",
          describe:'辣味很好的去腥'
        },
        {
          title: "鸡脚饭",
          price: "35",
          text: "肆佰年老字号",
          describe:'凤爪不解释'

        },
        {
          title: "不拉面",
          price: "29",
          text: "肆佰年老字号",
          describe:'不拉的面'

        },
      ],
    };
  },
  methods: {
    select(text='') {
      this.text += text+'    ';
      if(!text){
      this.text ='';
      }
    },
  },

  computed: {},
};
</script>

<style scoped>
.head{
  display: flex;
  justify-content:space-between ;
}
h3{
  margin-left: 20px;
}
.head button{
  margin-right: 20px;
}
</style>